<script setup>
import {onMounted, ref} from "vue";
import {getNotices} from "@/api/notice/notice.js";

const noticeList = ref([
  {
    'id': 1,
    'avatar': null,
    'username': 'JeieZhang',
    'content': '我去，厉害极了',
    'comment': '我厉害吗',
    'albumCover': null,
    'musicName': '偏爱',
    'musician': '李白',
    'commentTime': '9月23日 11:20'
  }
])
const loading = ref(false)

onMounted(() => {
  loading.value = true
  const account = localStorage.getItem('account')
  getNotices(account).then(res => {
    noticeList.value = res.data
    loading.value = false
  })
})
</script>

<template>
  <div v-loading="loading" class="container">

    <div style="border-top: none" class="notice">
      <img src="/src/assets/img/other/like.png" width="38" height="38" style="border-radius: 50%;position: absolute;top: 15px;left: 0">
      <div style="height: 20px;line-height: 20px;margin-bottom: 6px" class="hover">评论点赞通知</div>
      <div style="height: 28px;line-height: 28px;color: #e4836f;cursor:pointer;">点击查看 <i></i></div>
    </div>

    <div v-for="(item, index) in noticeList" class="notice">
      <img width="38" height="38" style="position: absolute;top: 15px;left: 0" :src="item.avatar == null ? 'src/assets/img/icon.png' : item.avatar">
      <div style="color: #7a7a7a">
        <span class="hover" style="display: inline-block;margin-right: 13px">{{ item.username }}</span>
        <span>回复了你的评论</span>
      </div>
      <div style="margin-top: 6px;margin-bottom: 8px;"><span v-html="item.content"></span></div>

      <div style="height: 23px;line-height: 23px;border-left: 1px solid #919191;color: #7a7a7a;
      padding-left: 10px" >回复：<span v-html="item.comment"></span></div>

      <div style="display: flex;gap: 12px;margin-top: 11px;margin-bottom: 10px">
        <img style="cursor:pointer;" width="85" height="86" :src="item.albumCover == null ? 'src/assets/img/default-album.png' : item.albumCover" >
        <div style="display: flex;flex-direction: column;justify-content: center;gap: 5px">
          <div class="hover1">歌曲：{{ item.musicName }}</div>
          <div style="color: #7a7a7a">{{ item.musician }}</div>
        </div>
      </div>

      <div style="color: #7a7a7a;height: 30px;line-height: 30px;font-size: 14px">{{ item.commentTime }}</div>

    </div>


    <div style="text-align: center;color: #a1a1a1">— 以上为全部评论消息 —</div>
  </div>
</template>

<style scoped>


i {
  width: 14px;
  height: 24px;
  display: inline-block;
  margin: -6px -3.5px;
  scale: 0.5;
  background: url("/src/assets/img/total.png") no-repeat -240px -120px;
}

.hover {
  color: #7a7a7a
}
.hover:hover, .hover1:hover {
  color: #e4836f;
  cursor: pointer;
}
.hover1 {
  color: #000000;
}
.container {
  padding-top: 60px;
  margin-left: calc(50vw - 390px);
  margin-right: calc(50vw - 600px);
}
.notice {
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 1px solid #eaeaea;
  padding: 15px 0 15px 56px;
  font-size: 15px;
}
* {
  font-family: poppin, Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
}
</style>
